<template>
    <div>
        <jzt-dropdown
            class="page-sizes"
            popper-class="page-sizes-popper jzt-dropdown-active"
            placement="top"
            :teleported="paginationTeleported">
            <template #jztGlobalDropdownLind>
                {{ pageSize }}条/页
                <jzt-icon size="12"><i-ep-arrow-down /></jzt-icon>
            </template>
            <template #jztGlobalDropdown>
                <el-dropdown-menu>
                    <el-dropdown-item
                        v-for="(item, index) in pageSizes"
                        :key="index"
                        :class="{'active': item === pageSize}"
                        @click="pageSizeChange(item)"
                    >{{ item }}条/页</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </jzt-dropdown>
    </div>
  </template>
  <script setup>
  import {ref} from 'vue'
  const currentPage = ref(1)
  const pageSize = ref(10)
  const pageSizes = ref([10, 20, 30, 40, 50, 100, 200])
  // 每页显示条目数改变
  const pageSizeChange = (num) => {
    pageSize.value = num
    currentPage.value = 1
  }
  </script>
  
  